<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <breadcrumb>素材管理</breadcrumb>
    </div>
    <!-- 筛选部分 -->
    <div style="padding-bottom:20px;">
      <el-radio-group v-model="isCollected" style="margin-bottom: 30px;" @change="hToggle">
        <el-radio-button :label="false">全部</el-radio-button>
        <el-radio-button :label="true">收藏</el-radio-button>
      </el-radio-group>
      <el-button
          @click="dialogVisible=true"
          type="success" size="mini" style="float:right">上传图片素材</el-button>
      <el-dialog
      title="素材上传"
      append-to-body
      :visible.sync="dialogVisible">
        <el-upload
          class="avatar-uploader"
          action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
          :headers="headers"
          name="image"
          :show-file-list="false"
          :on-success="hAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <!-- img用来显示上传成功之后的图像 -->
        <el-image v-if="imageUrl" :src="imageUrl" class="avatar" @load="hpreviewImageload(iam)"/>
        <!-- 显示引导用户上传的 那个 + 号 -->
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-dialog>
    </div>
    <!-- 图片素材区域 -->
    <el-row :gutter="10">
        <el-col v-for="image in images" :key="image.id" :span="4" class="img_item" :xs="12" :sm="6" :md="6" :lg="4">
          <el-image
            style="height: 180px;width: 180px"
            :src="image.url"
            fit="cover"
          ></el-image>
          <!-- 选择收藏的时候，隐藏 -->
          <div class="option" v-show="!isCollected">
            <span class="el-icon-star-off" :class="{'red':image.is_collected}" @click="hSwitchCollected(image)"></span>
            <span class="el-icon-delete" @click="hDel(image.id)"></span>
          </div>
        </el-col>
    </el-row>
    <!-- 图片素材区域end -->
    <!-- 分页部分 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalCount"
      @current-change="hPageChange"
      >
    </el-pagination>
  </el-card>
</template>
<script>
// 完成页面的步骤分解
// 1.配置路由---完成
// 2.页面布局---完成
// (1).先封装面包屑导航，设置为全局组件---完成
// (2).实现图片的呈现布局，Layout布局+image---完成
// (3).设置收藏显示红色效果，添加一个类名---完成(类名需要加引号)
// 3.实现分页效果---完成
// (1)引入模板，发送请求，渲染数据
// (2)点击页面重新发送请求
// 4.完成全部和收藏的筛选---完成
// (1).v-model绑定isCollected,选项：lable绑定布尔值，表示被选中对的value值
// (2).绑定切换事件---完成(要点要当前页更改为1)
// 5.实现图片的上传功能
// (1).利用组件实现布局---完成
// (2).上传图片---完成
// (3).优化，添加load事件---完成
// 6.实现图片的删除功能---完成
// 7.实现图片的点击收藏和取消收藏
// (1) 绑定切换事件
// (2) 收藏里的图片 隐藏删除和收藏效果
export default {
  data () {
    return {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('tokenStr')}`
      },
      imageUrl: '',
      dialogVisible: false, // 默认无弹框
      // 分页添加数据,总条数和当前页面
      totalCount: 0,
      curPage: 1,
      images: [],
      isCollected: false,
      tabPosition: 'all'
    }
  },
  created () {
    this.loadImages()
  },
  methods: {
    // 切换是否收藏事件
    hToggle () {
      // 1.更新页面为1
      this.curPage = 1
      // 2.重新发送请求
      this.loadImages()
    },
    // 页面一打开就发送请求获取图片
    async loadImages () {
      try {
        const res = await this.$http({
          method: 'GET',
          url: '/mp/v1_0/user/images',
          params: {
            per_page: 10, // 每页展示的数据
            collect: this.isCollected,
            page: this.curPage
          }
        })
        console.log(res)
        // 更新总条数
        this.totalCount = res.data.data.total_count
        this.images = res.data.data.results
      } catch (err) {
        console.log(err)
      }
    },
    // 页面修改，默认传入参数为当前页面
    hPageChange (CurPage) {
      // 1.更新当前页面
      this.curPage = CurPage
      // 2.重新发送请求，渲染页面
      this.loadImages()
    },
    hAvatarSuccess (res, file) {
      // 1.查看效果
      // console.log('上传图片请求的结果', res)
      this.imageUrl = res.data.url
      // 2. 重新请求一次
      this.loadImages()
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    hpreviewImageload () {
      // 定时器设置两秒后，弹框消失
      setTimeout(() => {
        // 1.去掉弹框
        this.dialogVisible = false
        // 2.图片预览清空
        this.imageUrl = ''
        // 3. 成功上传消息提示
        this.$message.success('素材已上传成功')
      }, 2000)
    },
    // 图片删除的点击事件
    async doDel (id) {
      try {
        const res = await this.$http({
          method: 'DELETE',
          url: '/mp/v1_0/user/images/' + id
        })
        console.log(res)
        // 删除成功 渲染页面
        this.$message.success('删除素材成功')
        // 重新渲染页面
        this.loadImages()
      } catch (err) {
        console.log(err)
        this.$message.error('删除素材失败')
      }
    },
    hDel (id) {
      this.$confirm('您确定删除该素材吗').then(() => {
        // 点击确定
        this.doDel(id)
      }).catch(() => {
        // 用户点击取消
      })
    },
    // 点击切换收藏效果
    hSwitchCollected (image) {
      // 获取当前的id
      console.log('收藏时候的image', image)
      const imageId = image.id
      this.$http({
        method: 'PUT',
        url: '/mp/v1_0/user/images/' + imageId,
        data: {
          // 是否收藏，false-取消收藏，true-添加收藏
          collect: !image.is_collected
        }
      })
      // 收藏成功 切换该图片收藏的状态
      image.is_collected = !image.is_collected
    }
  }
}
</script>
<style lang="less" scoped>
  .img_item {
    position: relative;
    box-sizing: border-box;
  }
  .option {
    position: absolute;
    left: 5px;
    width:180px;
    bottom: 5px;
    height: 30px;
    line-height: 30px;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    color: #fff;
    span {
      margin: 0 30px;
      cursor: pointer;
    }
  }
.avatar{
  width: 300px;
}
.avatar-uploader {
    text-align: center;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar-uploader /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.red{
  color: red;
  font-size: 30px;
  font-weight: 600;
}
</style>
